<div class="game">
  <div class="dashboard">
     <!-- holder -->
    <th-tetris-preview [label]="'HOLD'" [shape]="game?.inHold">
      <th-swap-error [error]="game?.swapFoul"></th-swap-error>
    </th-tetris-preview>
    <div class="scoreboard">
      <div class="score">SCORE: {{game.score}}</div>
      <div class="level">LEVEL: {{game.level}}</div>
      <div class="level">LINES: {{game.lines}}</div>
    </div>
    <button (click)="start()">{{startLabel}}</button>    
    <button 
      *ngIf="pauseLabel"
      (click)="togglePause()">{{pauseLabel}}</button>
  </div>

  <div class="well">
    
    <div class="grid">
        <th-tetris-matrix></th-tetris-matrix>
        <!-- 1 active -->
        <th-tetrimino></th-tetrimino>
        <!-- 1 shadow -->
        <th-tetrimino></th-tetrimino>
        <div  class="gameover"
          [hidden]="!game.gameOver"      
          [ngClass]="{show:game.gameOver}"
          (click)="start()"
        >
          <div class="pill">GAME OVER</div>
        </div>
    </div>
    

   
   
    

   
    
   
  </div>
  <!-- 1x2 transparent -->
  <div class="previewBar">
    <!-- box for the next -->
    <th-tetris-preview [label]="'NEXT'" [shape]="game?.next"></th-tetris-preview>
    <!-- box for the queue -->
    <th-tetris-queue  [shapes]="game?.inQueue">
    </th-tetris-queue> 
  </div>

  

  
</div>